<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<link rel="stylesheet" href="../css/common.css">
		<link rel="stylesheet" type="text/css" href="../css/order.css" />
		<script src="../js/rem.js" type="text/javascript" charset="utf-8"></script>
		<title>填写地址</title>
		<style>
			body{
				margin: 0;
				padding: 0;
			}
			ul li{
				font-size: .32rem;
			}
			.wheel-scroll.wheel-scroll-hook {
				margin: 0;
				padding: 0;
			}
			.picker .picker-panel .wheel-wrapper{
				overflow-x: hidden;
				overflow-y: scroll;
			}
		</style>
	</head>
	<body>
		<div id="container">
			<div class="content">
				<div class="add-top">
					<span class="add">增加收货地址</span>
				</div>
				<div class="take">
					<input class="take-name" type="text" v-model="name" id="name" placeholder="收货人" onblur="this.placeholder='请输入收货人'" />
				</div>
				<div class="take">
					<input class="take-name" type="number" maxlength="11"  v-model="tel" id="tel" placeholder="手机号码" onblur="this.placeholder='请输入手机号码'" oninput="if(value.length>11)value=value.slice(0,11)"/>
					<span class="take-right" @click="tel()">+86&nbsp;></span>
				</div>
				<div class="take">
					<div class="take-area">
						<label for="picker" id="pickerLabel">
							<input type="text" id="picker" readonly placeholder="所在地区">
						</label>
						<span>></span>
					</div>
					<textarea class="take-address" type="text" v-model="address" placeholder="详细地址：如道路、小区、楼栋号、单元室、门牌号等" /></textarea>
				</div>
				<div class="gift">
					<span class="gift-info">礼品信息：</span>
					<div class="info" v-for=" items in list" @click="giftDetails(items)">
						<div class="info-content">
							<div class="left">
								<img :src="items.img" class="info-img" alt="" />
							</div>
							<div class="rigth">
								<span v-text="items.title" class="goods-title"></span>
								<span class="goods-price">￥{{items.price}}</span>
								<div class="info-money">
									<span class="info-discount">￥{{items.discount}}</span>
									<span class="info-num">x{{items.number}}</span>
								</div>
							</div>
						</div>
						<div class="info-title">
							<span>{{items.goods}}保证3之内24小时发货</span>
							<span>只需支付{{items.pay}}元快递费用</span>
							<span>咨询电话：{{items.tel}}</span>
						</div>
					</div>
				</div>
			</div>
			<div class="add-foot" v-for=" items in list">
				<span class="foot-title">共{{items.number}}件，合计：￥：{{items.pay}}元</span>
				<input class="foot-pay" type="button" value="购买" @click="pay()" />
			</div>
		</div>
		<script src="../js/vue.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/layer/layer.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/address/picker.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/address/city.js" type="text/javascript" charset="utf-8"></script>
		<script async src="../js/address/picker-city.js" type="text/javascript" charset="utf-8"></script>
		<script>
			// 秒数倒计时
			function countDown(secs, surl) {
				var jumpTo = document.getElementById('jumpTo');
				jumpTo.innerHTML = secs;
				if (--secs > 0) {
					setTimeout("countDown(" + secs + ",'" + surl + "')", 1000);
				} else {
					location.href = surl;
				}
			}
		</script>
		<script type="text/javascript">
			new Vue({
				el: '#container',
				data: {
					goodsId: '',
					tel: '',
					name: '',
					area: '',
					address: '',
					list: [{
						img: '../img/video.png',
						title: '精品养生茶具精品养生茶具精品养生茶具精品养生茶具',
						price: '5.00',
						discount: '2.00',
						number: '1',
						goods: 'XXXX公司',
						pay: '10',
						tel: '400-080-2599'
					}]
				},
				mounted() {
					this.goodsId = this.getRequest().goodsId
					this.getOrderInfo()
					this.initInput()
				},
				methods: {
					getRequest() {
						var url = location.search; //获取url中"?"符后的字串
						var theRequest = new Object();
						if (url.indexOf("?") != -1) {
							var str = url.substr(1);
							strs = str.split("&");
							for (var i = 0; i < strs.length; i++) {
								theRequest[strs[i].split("=")[0]] = unescape(strs[i].split("=")[1]);
							}
						}
						return theRequest;
					},
					initInput() { //优化input不回弹bug
						$("input").blur(function() {
							setTimeout(function() {          
								var scrollHeight = document.documentElement.scrollTop || document.body.scrollTop || 0;          
								window.scrollTo(0, Math.max(scrollHeight - 1, 0));       
							}, 100);
						})
					},
					getOrderInfo() {
						var self = this
						$.ajax({
							type: "post",
							url: "",
							data: {
								goodsId: this.goodsId
							},
							success: function(res) {
								self.list = res.list
							}
						});
					},
					pay() {
						var self = this
						var tel = document.getElementById("tel").value
						var name = document.getElementById("name").value
						var picker = document.getElementById("picker").value
						if (name == "") {
							layer.msg("请输入收货人信息！")
							return false;
						} else if (tel == '') {
							layer.msg("请输入收货人电话！")
							return false;
						} else if(picker == ''){
							layer.msg("请输入区域信息！")
							return true;
						}
						window.location.href = "success.html"
						// console.log(this.name+','+this.tel+','+$("#picker").val()+','+this.address)
						$.ajax({
							type: "post",
							url: "",
							data: {
								name: this.name,
								tel: this.tel,
								city: $("#picker").val(),
								address: this.address,
							},
							success: function(res) {
								if (res.code == 1) {
									layer.msg("支付成功！")
									window.location.href = "success.html"
								} else {
									layer.msg("支付失败！")
								}
							}
						})
					},
					giftDetails(items) {}
				}
			})
		</script>
		<script type="text/javascript">

		</script>

	</body>

</html>
